<template>
  <div>
    <el-tag v-if="form.WFM_Status == 1" type="primary">
      {{ form.Status }}
    </el-tag>
    <el-tag v-if="form.WFM_Status == 2" type="success">
      {{ form.Status }}
    </el-tag>
    <el-tag v-if="form.WFM_Status == -1" type="default">
      {{ form.Status }}
    </el-tag>
    <el-tag v-if="form.WFM_Status == -2" type="danger">
      {{ form.Status }}
    </el-tag>
    <div
      v-for="(step, index) in form.FormSteps"
      :key="index"
      style="margin: 10px 5px; background-color: powderblue"
    >
      {{ step.FRS_Name }}
      {{ step.FRS_CreateTime }}
      {{ step.FRS_CheckOneTime ? '自动跳过' : '' }}
      {{ step.FOC_Name }}
      {{ step.FRS_ChoiceDesc }}
      {{ step.MultiOpPassTypeDesc }}
      {{ step.FRS_Score ? '总' + step.FRS_Score + '分' : '' }}

      <div v-for="item in step.OperatorScores" :key="item">
        {{ item.USR_Name }}：{{ item.FSOS_Score }}分
      </div>
      <span v-for="(action, aindex) in step.Actions" :key="aindex">
        【{{ action.BFA_Name }}】
      </span>
      <i
        class="el-icon-star-on"
        v-if="form.CurStep && step.FRS_Guid == form.CurStep.FRS_Guid"
      ></i>
      <span v-for="(choice, cindex) in step.Choices" :key="cindex">
        {{ choice.FSC_OperatorDesc }}
      </span>
      <el-button
        type="text"
        v-if="
          step.FRS_OperatorChoice >= 6 &&
          step.FRS_OperatorChoice <= 8 &&
          !form.WFM_ID
        "
        @click="getChoiceEmployees(step)"
      >
        选择成员
      </el-button>
    </div>
    <el-divider>操作记录</el-divider>
    <div
      v-for="log in form.Operators"
      :key="log.FSO_ID"
      style="margin: 10px 5px; background-color: powderblue"
    >
      {{ log.FRS_Name }}
      {{ log.USR_Name }}
      {{ log.FSO_IsChecked ? '' : '待审核' }}
      {{ log.OperateTypeDesc }}
      {{ log.FSO_Comment }}
      {{ log.FSO_CreateTime }}
      <div>
        <a
          v-for="(file, index) in log.Files"
          :key="file.FSOF_ID"
          @click="downloadFile(file)"
        >
          文件{{ index + 1 }}: {{ file.FL_Name }}
        </a>
      </div>
    </div>
    <el-dialog
      :visible.sync="chooseEmpVis"
      width="380px"
      title="选择成员"
      :modal-append-to-body="false"
    >
      <el-checkbox
        v-for="(emp, eindex) in emps"
        :key="eindex"
        :value="
          curStep.Choices &&
          curStep.Choices.findIndex(
            (x) => x.FSC_OperatorID == emp.ECV_TargetID
          ) != -1
        "
        @change="
          (ischecked) => {
            empChoose(emp, ischecked)
          }
        "
      >
        {{ emp.USR_Name }}
      </el-checkbox>
    </el-dialog>
  </div>
</template>
<script>
import { baseURL, fileRoot } from '@/config'
import { getChoiceEmployees } from '@/api/flowCenter/form/formProcess'
export default {
  props: ['form'],
  data: function () {
    return {
      fileURL: baseURL + fileRoot,
      emps: [],
      curStep: null,
      chooseEmpVis: false,
    }
  },
  computed: {},
  methods: {
    downloadFile(file) {
      var a = document.createElement('a')
      a.setAttribute('download', file.FL_Name)
      a.setAttribute('href', this.fileURL + file.FL_SrcPath)
      a.click() // 设置点击事件
    },
    empChoose(emp, ischecked) {
      if (this.curStep) {
        if (ischecked) {
          if (!this.curStep.Choices) this.curStep.Choices = []
          this.curStep.Choices.push({
            FSC_FormStepGuid: this.curStep.FRS_Guid,
            FSC_OperatorDesc: emp.USR_Name,
            FSC_OperatorID: emp.ECV_TargetID,
          })
        } else {
          this.curStep.Choices.splice(
            this.curStep.Choices.findIndex(
              (x) => x.FSC_OperatorID == emp.ECV_TargetID
            ),
            1
          )
        }
        this.$forceUpdate()
      }
    },
    getChoiceEmployees(step) {
      this.curStep = step
      getChoiceEmployees({
        opChoice: step.FRS_OperatorChoice,
        id: step.FRS_ChoiceID,
      }).then(({ data }) => {
        this.emps = data
        this.chooseEmpVis = true
      })
    },
  },
}
</script>